<template>
  <div style="width: 80%">
    <h1>信息显示</h1>
    <div>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-image
                style="max-width: 300px; max-height: 300px"
                :src="'route/images/' + staffInfo.photograph"
              />
            </el-col>
            <el-col :span="12" :offset="0">
              <div>
                姓名：<span>{{ staffInfo.staffName }}</span>
              </div>

              <br />

              <div>
                性别：
                <span v-if="staffInfo.gender == true">女</span>
                <span v-if="staffInfo.gender == false">男</span>
              </div>

              <br />

              <div>
                员工编号：<span>{{ staffInfo.employeeID }}</span>
              </div>

              <br />

              <div>
                身份证号：<span>{{ staffInfo.idNumber }}</span>
              </div>

              <br />

              <div>
                联系电话：<span>{{ staffInfo.phone }}</span>
              </div>

              <br />

              <div>
                所在部门：<span>{{ staffInfo.departmentName }}</span>
              </div>

              <br />

              <div>
                员工状态：<span>{{ staffInfo.staffStateName }}</span>
              </div>

              <br />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-button
            v-show="staffInfo.isFreeze == false"
            @click="freeze(staffInfo.staffId)"
            >冻结账号</el-button
          >
          <el-button
            type="primary"
            v-show="staffInfo.isFreeze == true"
            @click="thaw(staffInfo.staffId)"
            >解冻账号</el-button
          >
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script ts="lang" setup>
import axios from "axios";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";

const route = useRoute();

//员工信息
let staffInfo = ref({});

//获取员工信息
const getStaff = () => {
  axios
    .get(
      "Readroute/api/StaffInfo/GetStaffInfo?employeeID=" +
      route.query.employeeID
    )
    .then((res) => {
      //console.log(res.data);
      staffInfo.value = res.data;
    });
};

//冻结账号
const freeze = (staffId) => {
  axios.put("route/api/Staff/FreezeStaff?staffId=" + staffId).then((res) => {
    if (res.data == 1) {
      ElMessage.success("冻结成功！");
      window.location.reload();
    }
  });
};

//解冻账号
const thaw = (staffId) => {
  axios.put("route/api/Staff/ThawStaff?staffId=" + staffId).then((res) => {
    if (res.data == 1) {
      ElMessage.success("解冻成功！");
      location.reload();
    }
  });
};

onMounted(() => {
  getStaff();
});
</script>
<style></style>